<template>
  <div id="current">
    <h1>智慧灯杆性能展示</h1>
    <h2>图表</h2>
    <div style="display: flex;">
      <div style="height:200px;width:700px;"
           ref="myEchart_hum">
      </div>
      <div style="height:200px;width:700px;"
           ref="myEchart_tem">
      </div>
      <div style="height:200px;width:700px;"
           ref="myEchart_sunvalue">
      </div>
      <div style="height:200px;width:700px;"
           ref="myEchart_ledvalue">
      </div>
    </div>

    <h2>列表</h2>
    <el-table :data="tableData"
              style="width: 100%">
      <el-table-column prop="led_OnOff"
                       label="路灯开关">
      </el-table-column>
      <el-table-column prop="buzzer_OnOff"
                       label="报警器开关">
      </el-table-column>
      <el-table-column prop="air"
                       label="空气质量">
      </el-table-column>
      <el-table-column prop="ifRain"
                       label="雨况">
      </el-table-column>

      <el-table-column prop="led_Value"
                       label="路灯亮度">
      </el-table-column>

      <el-table-column prop="tem"
                       label="温度（°C）">
      </el-table-column>
      <el-table-column prop="hum"
                       label="湿度（%）">
      </el-table-column>
      <el-table-column prop="sunValue"
                       label="光线强度（%）">
      </el-table-column>
      <el-table-column prop="rainValue"
                       label="水位（cm）">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'
import echarts from 'echarts'

export default {
  name: 'Current',
  props: {
    msg: String
  },
  mounted: function () {
    // this.initChart();
    this.initChart_hum();
    this.initChart_tem();
    this.initChart_sunvalue();
    this.initChart_ledvalue();
    setInterval(() => {
      axios.post('/api/getCurrentDate')
        .then(res => {
          console.log(res);
          this.tableData.push(res.data);
          this.hum_data.push(res.data.hum);
          this.tem_data.push(res.data.tem);
          this.sunvalue_data.push(res.data.sunValue);
          this.ledvalue_data.push(res.data.led_Value);
          let date = new Date();
          this.timelist.push(date.getMinutes() + '.' + date.getSeconds());
          this.chart_hum.setOption({
            xAxis: [{
              data: this.timelist
            }],
            series: [{
              data: this.hum_data
            }]
          });
          this.chart_tem.setOption({
            xAxis: [{
              data: this.timelist
            }],
            series: [{
              data: this.tem_data
            }]
          });
          this.chart_sunvalue.setOption({
            xAxis: [{
              data: this.timelist
            }],
            series: [{
              data: this.sunvalue_data
            }]
          });
          console.log(this.sunvalue_data);
          this.chart_ledvalue.setOption({
            xAxis: [{
              data: this.timelist
            }],
            series: [{
              data: this.ledvalue_data
            }]
          });
          console.log(this.ledvalue_data);
        })
    }, 1000)

  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose();
    this.chart = null;
  },
  data () {
    return {
      tableData: [],
      chart_hum: null,
      chart_tem: null,
      chart_sunvalue: null,
      chart_ledvalue: null,
      hum_data: [],
      tem_data: [],
      sunvalue_data: [],
      ledvalue_data: [],
      timelist: []
    }
  },
  methods: {
    initChart () {
      this.chart_hum = echarts.init(this.$refs.myEchart_hum);
      this.chart_tem = echarts.init(this.$refs.myEchart_tem);
      this.chart_sunvalue = echarts.init(this.$refs.myEchart_sunvalue);
      this.chart_ledvalue = echarts.init(this.$refs.myEchart_ledvalue);

    },
    initChart_hum () {
      this.chart_hum = echarts.init(this.$refs.myEchart_hum);
      // 把配置和数据放这里
      this.chart_hum.setOption({
        color: ['#3398DB'],
        title: {
          text: '湿度（%）'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: [],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          type: 'line',
          data: []
        }]
      })
    },
    initChart_tem () {
      this.chart_tem = echarts.init(this.$refs.myEchart_tem);
      // 把配置和数据放这里
      this.chart_tem.setOption({
        color: ['#3398DB'],
        title: {
          text: '温度（°C）'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: [],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          type: 'line',
          data: []
        }]
      })
    },
    initChart_sunvalue () {
      this.chart_sunvalue = echarts.init(this.$refs.myEchart_sunvalue);
      // 把配置和数据放这里
      this.chart_sunvalue.setOption({
        color: ['#3398DB'],
        title: {
          text: '太阳亮度'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: [],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          type: 'line',
          data: []
        }]
      })
    },
    initChart_ledvalue () {
      this.chart_ledvalue = echarts.init(this.$refs.myEchart_ledvalue);
      // 把配置和数据放这里
      this.chart_ledvalue.setOption({
        color: ['#3398DB'],
        title: {
          text: '光线强度'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: [],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          type: 'line',
          data: []
        }]
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
